<template>
  <aside>
    <div class="self-info">
      <img v-bind:src="userInfoImage" alt="用户头像" class="img-circle self-image">
      <p class="self-name">{{ userInfo.name }}</p>
      <p class="self-like"><span class="glyphicon glyphicon-heart"></span>&nbsp&nbsp{{ userInfo.like }}</p>
      <p class="self-other">{{ userInfo.email }}</p>
    </div>
  </aside>
</template>

<script>
  import user from './../assets/image/user.png'
  export default {
    name : 'sidebar',
    data() {
      return {
        userInfoImage: user,
      }
    },
    computed: {
      userInfo() {
        return this.$store.state.userInfo;
      }
    }
  }
</script>

<style>
  aside {
    flex: 0 0 27rem;
    background-color: #729FBF;
  }
  .self-info {
    text-align: center;
    color: white;
  }
  .self-image {
    margin-top: 2rem;
    margin-bottom: 1rem;
    width: 12rem;
  }
  .self-name {
    font-size: 2.5rem;
  }
  .self-like {
    font-size: 2rem;
  }
  .self-other {

  }
</style>
